<!-- 核酸检测-队列列表 -->
<template>
	<view>
		<view class="no-warpper">
			<view class="nl-shadow-box card-box">
				<view class="top">
					<view class="call-state">正在呼叫</view>
					<view class="floor-unit">1-1</view>
					<view class="btm">
						<view class="start">开始</view>
						<view class="call">呼叫下一批</view>
					</view>
				</view>
				
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="lable">{{item.floorName}}-{{item.unitNum}}</view>
						<view class="right">{{item.stateName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		queryNucleicQueue,
	} from '@/api/nucleic.js';
	export default {
		data() {
			return {
				nowCallItem:{},	// 正在呼叫
				list:[],	// 等待呼叫的列表
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad(option) {
			this.queryNucleicQueue(option.siteId)
		},
		methods: {
			queryNucleicQueue(siteId){
				let parmas = {
					page:1,
					row:99,
					siteId:siteId,
				}
				queryNucleicQueue(parmas).then((res)=>{
					if(res.code == 0){
						this.list = res.data
					}
				}).catch(function(reason){
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.nl-shadow-box{
		.top{
			position: relative;
			padding-bottom: 24rpx;
			.call-state{
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				font-size: 28rpx;
			}
			.floor-unit{
				width: 100%;
				font-size: 48rpx;
				text-align: center;
				padding: 80rpx 0 40rpx;
			}
			
			.btm{
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					color: #FFFFFF;
					padding: 20rpx 40rpx;
					border-radius: 8rpx;
					text-align: center;
				}
				.start{
					background-color: $nl-color-main;
					margin-right: 20rpx;
				}
				.call{
					background-color: #19be6b;
				}
			}
		}
		
		.list{
			padding: 24rpx;
			border-top: 1px solid #F5F6FA;
			.item{
				width: 100%;
				padding:12rpx 24rpx;
				border: 4rpx solid #e0e0e0;
				border-radius: 8rpx;
				margin-bottom: 32rpx;
				display: flex;
				align-items: center;
				
				.button-mini{
					margin-left: auto;
				}
				
				.lable{
					color: #414141;
				}
			}
				
			.item:last-child{
				margin-bottom: 0;
			}
		}
	}
	
	
</style>
